<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片上传</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="./css/cropper.min.css">
    <link rel="stylesheet" href="css/pictureUpload.css">

    <!--引入的jQuery-->
    <script src="lib/jquery.min.js" type="text/javascript"></script>
    <script src="js/pictureUpload.js"></script>
</head>
<body>


<div class="container">

    <p class="text-center" style="margin-top: 20px;font-weight: bold">
        <a href="javascript:history.back(-1)"><span class="glyphicon glyphicon-chevron-left iconBack" aria-hidden="true" ></span></a>
        图片上传
    </p>

    <form class="pure-form" action="" method="post">
        <!-- 上传图片的预览区域 -->
        <section class="upload-box" id="J_upload_box">
            <div class="upload" id="J_file_wrap">
                <input type="file" accept="image/*" name="pic" id="J_file">
            </div>
        </section>

    </form>

    <!-- 图片裁剪工作区域 -->
    <section id="J_file_box">
        <img src="#" id="J_file_box_img" alt="">
    </section>

    <!-- 选择裁剪比例 -->
    <section class="crop-group" id="J_crop_group">
        <label>
            <input type="radio" name="scale" value="1/1">
            <span>1 : 1</span>
        </label>
        <label>
            <input type="radio" name="scale" value="4/3" checked="checked">
            <span>4 : 3</span>
        </label>
        <label>
            <input type="radio" name="scale" value="9/16">
            <span>9 : 16</span>
        </label>
    </section>

    <!-- 裁剪或取消 -->
    <section class="btn-group" id="J_btn_group">
        <span id="J_cancel">取消</span>
        <span id="J_crop">裁剪</span>
    </section>

    <div class="info1">
        <p>条码：026</p>
        <p>编码：26</p>
        <p>名称：商品26</p>
        <p>规格：1*10</p>
        <p>分类：食品</p>
    </div>

    <div class="info1">
        <p>批发价：11</p>
        <p>库存：100</p>
    </div>

    <button class="btn btn-warning sure">确定</button>

</div>






<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="./js/upload.js"></script>
<script src="./js/demo.js"></script>

</body>
</html>